<template>
  <main class="article-detail">
    <!-- 文章内容 -->
    <section class="article-page">
      <h1 class="article-title">{{ article?.title }}</h1>
      <div class="article-preview">
        <error-img class="preview-img" fit="contain" :src="article?.preview" />
        <div class="article-desc">{{ article?.description }}</div>
      </div>
      <article class="article-content" v-highlight v-html="article?.content"></article>
    </section>
    <!-- 文章评论 -->
    <section class="article-comment">
      <h2>评论：</h2>
    </section>
  </main>
</template>

<script setup lang="ts">
import articleApi from '@/apis/article';
import type { ArticleApiType } from '@/apis/article/namespace';

// 路由参数：文章ID
const route = useRoute();
const articleId = route.query.articleId as string;

// 文章详情数据
const article = ref<ArticleApiType.Article>();

// 获取文章详情
onMounted(async () => {
  if (!articleId) return;
  article.value = await articleApi.detail({ id: articleId });
});
</script>
<style scoped lang="scss">
.article-detail {
  --bg-1: #e2d1c1;
  --bg-2: #2a2c28;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  min-height: 100vh;
  padding: 2rem 1rem;
  background: url('/images/bg.jpg') repeat;
  background-size: 100%;
  .article-page {
    width: 100%;
    max-width: 800px;
    padding: 1rem;
    background: var(--bg-1);
    box-shadow:
      0 1px 4px rgba(0, 0, 0, 0.04),
      0 4px 10px rgba(0, 0, 0, 0.08);
    border-radius: 2px;
    overflow-y: auto;
    .article-title {
      padding: 0 1rem;
      color: var(--bg-1);
      font-size: 3rem;
      font-weight: 800;
      background: var(--bg-2);
      border-radius: 2px;
    }
    .article-preview {
      display: flex;
      gap: 1rem;
      width: 100%;
      height: 300px;
      margin-top: 1rem;
      padding: 0.5rem;
      background: var(--bg-2);
      border-radius: 2px;
      .preview-img {
        width: 50%;
        min-width: 200px;
        height: 100%;
        padding: 2px;
        border: var(--bg-1) solid 4px;
        border-radius: 2px;
      }
      .article-desc {
        font-size: 2rem;
        color: var(--bg-1);
      }
    }

    .article-content {
      margin-top: 0.5rem;
      padding: 0.5rem;
      border: var(--bg-2) solid 0.5rem;
      border-radius: 2px;
    }
  }
  .article-comment {
    width: 100%;
    max-width: 800px;
    padding: 1rem;
    background: var(--bg-1);
    border-radius: 2px;
    h2 {
      padding: 0 1rem;
      color: var(--bg-1);
      font-size: 2rem;
      font-weight: 800;
      background: var(--bg-2);
      border-radius: 2px;
    }
  }
}
</style>
